<template>
    <div class="totalInfo">
        <Alert type="success">贷款信息</Alert>
        <Form ref="totalInfo" :model="totalInfo" :rules="totalInfoValiate" :label-width="100">
            <Row>
                <Col span="8">
                    <FormItem label="合同价格" prop="totalcontAmt">
                        <Input v-model="totalInfo.totalcontAmt" autocomplete="off" class="w200" :disabled="isDisabled"/>
                        <input type="hidden" :value="totalcontAmt"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="贷款总额" prop="totalLoanAmt">
                        <Input v-model="totalInfo.totalLoanAmt" autocomplete="off" class="w200" @on-change="changeLoanAmt(totalInfo.totalLoanAmt)" :disabled="!isAppear"/>
                        <input type="hidden" :value="totalLoanAmt"/>
                          <span  :class="totalInfo.totalLoanAmt+'' !== totalInfo.totalLoanAmtOld+'' ? 'red' :''" v-show="totalInfo.totalLoanAmt+'' !== totalInfo.totalLoanAmtOld+''">
                               {{totalInfo.totalLoanAmtOld}}
                          </span>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="首付总额" prop="totalFirstAmt">
                        <Input v-model="totalInfo.totalFirstAmt" autocomplete="off" class="w200" :disabled="isDisabled"/>
                        <input type="hidden" :value="totalFirstAmt"/>
                          <span  :class="totalInfo.totalFirstAmt+'' !== totalInfo.totalFirstAmtOld+'' ? 'red' :''" v-show="totalInfo.totalFirstAmt+'' !== totalInfo.totalFirstAmtOld+''">
                               {{totalInfo.totalFirstAmtOld}}
                          </span>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <FormItem label="尾付总额" prop="totalTailAmt">
                        <Input v-model="totalInfo.totalTailAmt" autocomplete="off" class="w200" :disabled="isDisabled"/>
                          <span  :class="totalInfo.totalTailAmt+'' !== totalInfo.totalTailAmtOld+'' ? 'red' :''" v-show="totalInfo.totalTailAmt+'' !== totalInfo.totalTailAmtOld+''">
                               {{totalInfo.totalTailAmtOld}}
                          </span>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="首期月供总额" prop="totalRent">
                        <Input v-model="totalInfo.totalRent" autocomplete="off" class="w200" :disabled="isDisabled"/>
                          <span  :class="totalInfo.totalRent+'' !== totalInfo.totalRentOld+'' ? 'red' :''" v-show="totalInfo.totalRent+'' !== totalInfo.totalRentOld+''">
                               {{totalInfo.totalRentOld}}
                          </span>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="利息总额" prop="totalInterest">
                        <Input v-model="totalInfo.totalInterest" autocomplete="off" class="w200" :disabled="isDisabled"/>
                          <span  :class="totalInfo.totalInterest+'' !== totalInfo.totalInterestOld+'' ? 'red' :''" v-show="totalInfo.totalInterest+'' !== totalInfo.totalInterestOld+''">
                               {{totalInfo.totalInterestOld}}
                          </span>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
import * as utils from '_p/afs-apply/assets/js/utils.js'
export default {
    name:"totalInfo",
    data(){
        let validateLoanAmt=(rule,value,callback)=>{
                if(value){
                    if(this.loanAmtMax){
                        if(value>this.loanAmtMax){
                            callback('贷款总额需<=理论贷款总额')
                            return;
                        }
                    }else{
                        if(value>this.totalInfo.totalLoanAmtOld){
                            callback('贷款总额需<=历史贷款总额')
                            return;
                        }
                    }
                }
                callback();
            }
        return{
            proessModel:false,
            carPrice:"",
            additionalPrice:"",
            carDownPayAmt:"",
            additionalDownPayAmt:"",
            carLoanAmt:"",
            additionalLoanAmt:"",
            totalInfo:{
                totalcontAmt:"",
                totalLoanAmt:'',
                totalFirstAmt:"",
                totalTailAmt:"",
                totalInterest:"",
                totalRent:"",
                //留痕
                totalcontAmtOld:"",
                totalLoanAmtOld:"",
                totalFirstAmtOld:"",
                totalTailAmtOld:"",
                totalInterestOld:"",
                totalRentOld:"",
            },
            totalInfoValiate:{
                'totalLoanAmt':[
                    {required: true, message:"贷款总额不能为空", trigger: "blur"},
                    {validator:validateLoanAmt,trigger: "blur"}
                ]
            }
        }
    },
    props:{
        //理论最大额度
        loanAmtMax:{
            type:Number,
        },
        totalInfoData:{
            type:Object,
        },
        isAdditional:{
            type:String,
        },
        uuid:{
            type:String,
        },
        isSubProduct:{
            type:String,
        },
        isDisabled:{
            type:Boolean
        },
        isAppear: {
            type: Boolean
        }
    },
    watch:{
        totalInfoData(val){
            if(Object.keys(val).length>0){
                this.totalInfo.totalcontAmt=val.totalcontAmt;
                this.totalInfo.totalFirstAmt=val.totalFirstAmt;
                this.totalInfo.totalLoanAmt=val.totalLoanAmt.toString();
                this.totalInfo.totalTailAmt=val.totalTailAmt;
                this.totalInfo.totalInterest=val.totalInterest;
                this.totalInfo.totalRent=val.totalRent;


                //留痕
                this.totalInfo.totalcontAmtOld=val.totalcontAmtOld;
                this.totalInfo.totalFirstAmtOld=val.totalFirstAmtOld;
                this.totalInfo.totalLoanAmtOld=val.totalLoanAmtOld;

                this.totalInfo.totalTailAmtOld=val.totalTailAmtOld;
                this.totalInfo.totalInterestOld=val.totalInterestOld;
                this.totalInfo.totalRentOld=val.totalRentOld;
            }
        },
        'totalInfoData.totalInterest':{
            handler: function(val) {
                this.totalInfo.totalInterest=val;
            },
        },
        'totalInfoData.totalRent':{
            handler: function(val) {
                this.totalInfo.totalRent=val;
            },
        },
    },
    computed:{
        // 合同总金额
        totalcontAmt:function(){
            let totalcontAmt=0;
            if(this.isAdditional=='0'){
                totalcontAmt=this.carPrice;
            }else if(this.isAdditional=="1"){
                totalcontAmt=utils.add(this.carPrice,this.additionalPrice);
            }
            this.totalInfo.totalcontAmt=totalcontAmt||'';
            return totalcontAmt;
        },
        // 首付总金额
        totalFirstAmt:function(){
            let totalFirstAmt=0;
            if(this.isAdditional=='0'||this.isAdditional=="1"&&this.isSubProduct=="0"){
                totalFirstAmt=this.carDownPayAmt;
            }else if(this.isAdditional=="1"&&this.isSubProduct=="1"){
                totalFirstAmt=utils.add(this.carDownPayAmt,this.additionalDownPayAmt)
            }
            this.totalInfo.totalFirstAmt=totalFirstAmt||'';
            return totalFirstAmt;
        },
        // 总贷款金额
        totalLoanAmt:function(){
            let totalLoanAmt=0;
            if(this.isAdditional=="0"||this.isAdditional=="1"&&this.isSubProduct=="0"){
                totalLoanAmt=this.carLoanAmt;
            }else if(this.isAdditional=="1"&&this.isSubProduct=="1"){
                totalLoanAmt=utils.add(this.carLoanAmt,this.additionalLoanAmt)
            }
            this.totalInfo.totalLoanAmt=totalLoanAmt.toString()||'';
            let _this=this;
            this.$nextTick(()=>{
                _this.$refs.totalInfo.validateField('totalLoanAmt');
            })
            //理论最大贷额
            // if(this.loanAmtMax!==0){
            //     if(this.totalInfo.totalLoanAmt>this.loanAmtMax){
            //         this.changeLoanAmt(this.loanAmtMax,'theory')
            //     }
            // }
            return totalLoanAmt;
        },
    },
    created(){

    },
    mounted(){
        let _this=this;
        // 车贷或者车贷与附加贷页面传递过来的计算数据
        vueEvent.$on('to-carPrice',function(data,id){
            if(id==_this.uuid){
                _this.carPrice=data;
            }
        })
        vueEvent.$on('to-carDownPayAmt',function(data,id){
            if(id==_this.uuid){
                _this.carDownPayAmt=data;
            }
        })
        vueEvent.$on('to-carLoanAmt',function(data,id){
            if(id==_this.uuid){
                _this.carLoanAmt=data;
            }
        })
        //附加贷传递过来的计算数据
        vueEvent.$on('to-additionalPrice',function(data,id){
            if(id==_this.uuid){
                _this.additionalPrice=data;
            }
        })
        vueEvent.$on('to-additionalDownPayAmt',function(data,id){
            if(id==_this.uuid){
                _this.additionalDownPayAmt=data;
            }
        })
        vueEvent.$on('to-additionalLoanAmt',function(data,id){
            if(id==_this.uuid){
                _this.additionalLoanAmt=data;
            }
        })
    },
    // 解决多次绑定,多次触发问题
    beforeDestroy () {
        vueEvent.$off("to-carPrice");
        vueEvent.$off("to-carDownPayAmt");
        vueEvent.$off("to-carLoanAmt");
        vueEvent.$off("to-additionalPrice");
        vueEvent.$off("to-additionalDownPayAmt");
        vueEvent.$off("to-additionalLoanAmt");
    },
    methods:{
        changeLoanAmt(val,operFlag){
            this.$emit('isChange',true);
            vueEvent.$emit('to-totalLoanAmt',val,this.uuid,this.totalInfoData.totalLoanAmt,operFlag);
            setTimeout(()=>{
                this.$emit("isDeal")
            },500);
        },
        setTotalLoanAmt(theoryloanAmt){
            if(this.totalInfo.totalLoanAmt>theoryloanAmt){
                this.totalInfo.totalLoanAmt=theoryloanAmt;
                 this.changeLoanAmt(theoryloanAmt,'theory')
            }
        },
       submitTotalInfo(){
            let totalVailate=false;
            this.$refs.totalInfo.validate((valid) => {
                if(valid){
                    totalVailate=valid;
                }else{
                    totalVailate=false;
                }
            })
            if(totalVailate){
                return this.totalInfo;
            }else{
                return false;
            }
       },
       resetTotalInfo(){
            this.totalInfo={
                totalcontAmt:"",
                totalLoanAmt:"",
                totalFirstAmt:"",
                finalPayTotalAmt:"",
                totalDiscountAmt:"",
                totalRent:"",
            }
            return this.totalInfo;
       }

    }
}
</script>
<style>
    .sliderList  .ivu-slider-disabled .ivu-slider-button:hover{
        cursor: pointer;
    }
    .sliderList .ivu-slider-disabled .ivu-slider-button:hover,
    .sliderList .ivu-slider-disabled .ivu-slider-button-dragging{
        border-color:#efab4d;
    }
    .sliderList .ivu-slider-disabled .ivu-slider-button{
       border-color:#efab4d;
    }
    .sliderList .ivu-slider-disabled .ivu-slider-bar{
        background-color: #efab4d;
    }
</style>
<style scoped>
.totalInfo h2{
    font-size: 18px;
}
.totalInfo ul>li{
    margin-top: 10px;
}
.totalInfo ul>li b{
    font-size: 18px;
    font-weight: normal;
}

.red {
    color:red;
}


</style>
